<template>
  <TopNav title="院内营养产品风险评估"/>
  <div class="nutrition-product-risk-assessment-page">

    <!-- 产品信息输入区域 -->
    <div class="product-info-section">
      <h2 class="section-title">营养产品信息</h2>
      <el-form :model="productForm">
        <el-form-item label="产品名称">
          <el-input v-model="productForm.productName"></el-input>
        </el-form-item>
        <el-form-item label="产品类型">
          <el-select v-model="productForm.productType">
            <el-option label="肠内营养液" value="肠内营养液"></el-option>
            <el-option label="营养补充剂" value="营养补充剂"></el-option>
            <el-option label="特殊医学用途配方食品" value="特殊医学用途配方食品"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成分列表">
          <el-input v-model="productForm.ingredientList"></el-input>
        </el-form-item>
        <el-form-item label="适用人群">
          <el-input v-model="productForm.targetPopulation"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 风险评估指标区域 -->
    <div class="risk-assessment-indicators-section">
      <h2 class="section-title">风险评估指标</h2>
      <el-form :model="assessmentForm">
        <el-form-item label="过敏风险">
          <el-select v-model="assessmentForm.allergyRisk">
            <el-option label="低" value="低"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="高" value="高"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成分相互作用风险">
          <el-select v-model="assessmentForm.interactionRisk">
            <el-option label="低" value="低"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="高" value="高"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="微生物污染风险">
          <el-select v-model="assessmentForm.contaminationRisk">
            <el-option label="低" value="低"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="高" value="高"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="稳定性风险">
          <el-select v-model="assessmentForm.stabilityRisk">
            <el-option label="低" value="低"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="高" value="高"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 评估结果展示区域 -->
    <div class="assessment-result-section">
      <h2 class="section-title">评估结果</h2>
      <p>综合风险等级：<span>{{ overallRiskLevel }}</span></p>
      <p>安全性建议：<span>{{ safetyAdvice }}</span></p>
      <p>适用性建议：<span>{{ applicabilityAdvice }}</span></p>
      <el-button
          type="primary"
          @click="generateAssessment"
          :disabled="!productForm.productName ||!productForm.productType ||!productForm.ingredientList ||!productForm.targetPopulation ||!assessmentForm.allergyRisk ||!assessmentForm.interactionRisk ||!assessmentForm.contaminationRisk ||!assessmentForm.stabilityRisk"
      >生成评估</el-button>
    </div>

    <!-- 可视化区域（可展示风险比例等） -->
    <div class="visualization-section">
      <h2 class="section-title">风险可视化</h2>
      <div id="chart-container" style="width: 100%; height: 300px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';
import TopNav from "@/components/TopNav/Back.vue"
// 产品信息表单数据
const productForm = ref({
  productName: '',
  productType: '',
  ingredientList: '',
  targetPopulation: ''
});

// 风险评估表单数据
const assessmentForm = ref({
  allergyRisk: '',
  interactionRisk: '',
  contaminationRisk: '',
  stabilityRisk: ''
});

// 综合风险等级
const overallRiskLevel = ref('');
// 安全性建议
const safetyAdvice = ref('');
// 适用性建议
const applicabilityAdvice = ref('');

// 生成评估结果
const generateAssessment = () => {
  // 根据评估指标确定综合风险等级（简单示例逻辑，可根据实际情况完善）
  const riskScores = {
    低: 1,
    中: 2,
    高: 3
  };
  const totalRiskScore =
      riskScores[assessmentForm.value.allergyRisk] +
      riskScores[assessmentForm.value.interactionRisk] +
      riskScores[assessmentForm.value.contaminationRisk] +
      riskScores[assessmentForm.value.stabilityRisk];
  if (totalRiskScore <= 4) {
    overallRiskLevel.value = '低';
  } else if (totalRiskScore <= 8) {
    overallRiskLevel.value = '中';
  } else {
    overallRiskLevel.value = '高';
  }

  // 根据风险等级和产品信息给出安全性与适用性建议
  if (overallRiskLevel.value === '低') {
    safetyAdvice.value = '产品安全性较高，可在常规监测下使用。';
    applicabilityAdvice.value = '根据适用人群说明，合理使用该产品进行营养支持。';
  } else if (overallRiskLevel.value === '中') {
    safetyAdvice.value = '使用时需密切关注可能出现的不良反应，加强对患者的监测。';
    applicabilityAdvice.value = '仔细评估患者个体情况与产品的匹配度，必要时调整使用方案。';
  } else {
    safetyAdvice.value = '不建议使用，需重新评估产品或选择其他替代产品。';
    applicabilityAdvice.value = '该产品可能不适用于当前情况，考虑更合适的营养方案。';
  }

  // 可视化数据准备（简单示例，可根据实际需求完善）
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['过敏风险', '成分相互作用风险', '微生物污染风险', '稳定性风险'];
  const yAxisData = [
    riskScores[assessmentForm.value.allergyRisk],
    riskScores[assessmentForm.value.interactionRisk],
    riskScores[assessmentForm.value.contaminationRisk],
    riskScores[assessmentForm.value.stabilityRisk]
  ];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      min: 1,
      max: 3
    },
    series: [
      {
        name: '风险等级',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
};

// 页面加载时初始化图表
onMounted(() => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['过敏风险', '成分相互作用风险', '微生物污染风险', '稳定性风险'];
  const yAxisData = [0, 0, 0, 0];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      min: 1,
      max: 3
    },
    series: [
      {
        name: '风险等级',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
});
</script>

<style scoped>
.nutrition-product-risk-assessment-page {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  color: #303133;
  font-size: 28px;
}
.product-info-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.section-title {
  color: #303133;
  margin-bottom: 10px;
}
.risk-assessment-indicators-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.assessment-result-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.visualization-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
</style>
